<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="newbook.css">
<style type="text/css">
  body{
    width: 1200px;
    height: 1005px;
  }
  a{
    text-decoration:none; 
    font-size: large;
    
} 
.con {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:5px;
  width: 100%px;
    height: 40px;
    background-color:#4c5e69;
    transition-delay: 0.15s;
    border-bottom: 10px solid #4c5e69;
}
.con .left li a{
    color:black;
    font-size: large;
}
 a:link{
    color:black;
} 
 a:visited{
    color:black;
}
 a:hover{
    text-decoration: underline;
} 
 a:active{
    color:rgb(193, 41, 41);
}

.con .left{
    margin:auto;
}
 .con .left li{
    width:180px;
    float:left;
    height:50px;
    line-height:50px;
    margin-right:50px;
    color:white;
    cursor:pointer;
    list-style: none;}
footer {  
        background-color: #f2f2f2;  
        padding: 20px 0;  
        text-align: center;  
        font-size: 14px;  
      }  
/* 友情链接样式 */  
.friend-links {  
            list-style: none;  
            padding: 0;  
            margin: 10px 0 0 0; /* 顶部外边距与版权信息分隔 */  
        }  
    
 .friend-links li {  
            display: inline-block;  
            margin-right: 10px; /* 链接之间的间距 */  
        }  
    
.friend-links li:last-child {  
            margin-right: 0; /* 最后一个链接没有右边距 */  
        }  
    
.friend-links a {  
            text-decoration: none; /* 去除下划线 */  
            color: #666; /* 链接颜色 */  
        }  
    
.friend-links a:hover {  
            color: #333; /* 链接悬停时的颜色 */  
        }  
 
[type=text]{
    width: 400px;height: 60px;margin: 20px;font-size: 25px;margin-top: 50px;
    text-indent: 12px;border: 1px solid rgb(150,145,145);border-radius: 8px;
}
[type=submit]{
    width: 120px;height: 60px;background-color: cadetblue;margin-top: 50px;
    border: 1px solid rgb(146,193,195);font-size: 23px;color: aliceblue;border-radius: 5px;
}
.b{width:280;height: 380px;display:inline-block;}
.c{width:1500px;height:600px;}
.d{width:280;height:380;display:inline;}
.t{
    /* border: 1px solid black; */
    display: flex; 
    width: 100%;
    height: 380px; 
}
.t img{
    width: 1800px;
    height: 380px; 
}

.o{
   
   height: 200px;
   position: relative;
  top: 52px;
}
.o1{
  
    width:400px;
    height:150px;
    position: absolute;
    left: 80px;
}
.o2{
    
    width:800px;
    height:150px;
    position: absolute;
    right: -300px;
    
}
.e{width:280;height:380;display:inline-block;}
.g p{text-align: center;}
.c li{margin-left: 20px;
    width:180px;
    float:left;
    height:50px;
    line-height:50px;
    margin-right:50px;
    color:black;
    cursor:pointer;
    list-style: none;}
.l{font-size: 36px;color: #033;}
.l1{font-size: 25px;color:green;}
.newbook{
/* display: inline-block; */
    /* all: initial; */
    width: 1200px;
    height: 600px;
}


</style>
</head>

<body>
<!-- <header id="head"> -->

<div class="con">
    <ul class="left">
<li><a href="#">首页</a></li>
<li><a href="gongdu.html">共读空间</a></li>
<li><a href="register.html">登录/注册</a></li>
</ul>
</div>
<!-- </header> -->
<div class="o">
    <div class="o1">
        <img src="img/logo3.jpg" >
    </div>
    <div class="o2">
        <input type="text" name="id" placeholder="作者/书名">
        <input type="submit" value="GO">
    </div>
</div>
<div class="t"><img src="img/38.jpg" ></div>

<div class="newbook">
  <div id="main">
    <div class="section ">
      <div class="hd" id="dao">
         <h2 class="h2" id="week"> 每周新书 </h2> 
          <div class="tags" id="mu">
              <span class="item-all" id="quan">
                <a href="shouye.html" >全部</a>
              </span>
              <span class="item  " id="emm">
                <a href="ye1.html">文学</a>
              </span>
              <span class="item " id="emm">
                <a href="ye2.html">小说</a>
              </span>
              <span class="item " id="emm">
                <a href="ye3.html">历史文化</a>
              </span>
              <span class="item " id="emm">
                <a href="ye4.html">社会纪实</a>
              </span>
              <span class="item " id="emm">
                <a href="ye5.html">科学新知</a>
              </span>
              <span class="item " id="emm">
                <a href="ye6.html">艺术设计</a>
              </span>
              <span class="item " id="emm">
                <a href="ye7.html">商业经管</a>
              </span>
              <span class="item " id="emm">
                <a href="ye8.html">绘本漫画</a>
              </span>
          </div>
          <span class="link-more" id="ooo">
            <a href="more.html" target="_blank">更多»</a>
          </span>
      </div>
    <!-- Swiper轮播 -->
    <div class="swiper mySwiper" id="sw">
      <div class="swiper-wrapper">
     <div class="swiper-slide" id="sw-slide">
      <ul>
       <li>
         <div class="tupian">
           <a href="demo17.html" title="百年孤独"><img src="images/百年孤独.png" alt="百年孤独"></a>
         </div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo17.html" title="百年孤独">百年孤独</a>
           </div>
           <div class="author" id="zou">加西亚·马尔克斯</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo18.html" title="活着">
           <img src="images/活着.png" alt="活着"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo18.html" title="活着">活着</a>
           </div>
           <div class="author" id="zou">余华</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo19.html" title="我与地坛">
           <img src="images/我与地坛.png" alt="我与地坛"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo19.html" title="我与地坛">我与地坛</a>
           </div>
           <div class="author" id="zou">史铁生</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo20.html" title="呼啸山庄">
           <img src="images/呼啸山庄.png" alt="呼啸山庄"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo20.html" title="呼啸山庄">呼啸山庄</a>
           </div>
           <div class="author" id="zou">(英) 艾米莉·勃朗特</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo21.html" title="1984">
           <img src="images/1984.png" alt="1984"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo21.html" title="1984">1984</a>
           </div>
           <div class="author" id="zou"> [英] 乔治·奥威尔</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo22.html" title="局外人">
           <img src="images/局外人.png" alt="局外人"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo22.html" title="局外人">局外人</a>
           </div>
           <div class="author" id="zou"> [法] 阿尔贝·加缪</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo23.html" title="月亮与六便士">
           <img src="images/月亮与六便士.png" alt="月亮与六便士"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo23.html" title="月亮与六便士">月亮与六便士</a>
           </div>
           <div class="author" id="zou">[英] 威廉·萨默塞特·毛姆</div>
         </div>
       </li>
       <li>
         <div class="tupian"><a href="demo24.html" title="双城记">
           <img src="images/双城记.png" alt="双城记"></a></div>
         <div class="info" id="shu">
           <div class="title" id="biao">
             <a href="demo24.html" title="双城记">双城记</a>
           </div>
           <div class="author" id="zou">[英] 查尔斯·狄更斯</div>
         </div>
       </li>
   </ul>
  </div>
  <div class="swiper-slide" id="sw-slide">
    <ul>
     <li>
       <div class="tupian">
         <a href="demo25.html" title="老人与海"><img src="images/老人与海.png" alt="老人与海"></a>
       </div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo25.html" title="老人与海">老人与海</a>
         </div>
         <div class="author" id="zou">[美] 欧内斯特·海明威</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo26.html" title="傲慢与偏见">
         <img src="images/傲慢与偏见.png" alt="傲慢与偏见"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo26.html" title="傲慢与偏见">傲慢与偏见</a>
         </div>
         <div class="author" id="zou">简•奥斯丁</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo27.html" title="金瓶梅">
         <img src="images/金瓶梅.png" alt="金瓶梅"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo27.html" title="金瓶梅">金瓶梅</a>
         </div>
         <div class="author" id="zou"> 兰陵笑笑生</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo28.html" title="红与黑">
         <img src="images/红与黑.png" alt="红与黑"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo28.html" title="红与黑">红与黑</a>
         </div>
         <div class="author" id="zou">[法] 司汤达</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo29.html" title="欧也妮·葛朗台">
         <img src="images/欧也妮·葛朗台.png" alt="欧也妮·葛朗台"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo29.html" title="欧也妮·葛朗台">欧也妮·葛朗台</a>
         </div>
         <div class="author" id="zou">[法]巴尔扎克</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo30.html" title="相信">
         <img src="images/相信.png" alt="相信"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo30.html" title="相信">相信</a>
         </div>
         <div class="author" id="zou">蔡磊</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo31.html" title="你当像鸟飞往你的山">
         <img src="images/你当像鸟飞往你的山.png" alt="你当像鸟飞往你的山"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo31.html" title="你当像鸟飞往你的山">你当像鸟飞往你的山</a>
         </div>
         <div class="author" id="zou">塔拉·韦斯特弗</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo32.html" title="黄粱一梦">
         <img src="images/黄粱一梦.png" alt="黄粱一梦"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo32.html" title="黄粱一梦">黄粱一梦</a>
         </div>
         <div class="author" id="zou"> 不明眼</div>
       </div>
     </li>
  </ul>
  </div>
  <div class="swiper-slide" id="sw-slide">
    <ul>
     <li>
       <div class="tupian">
         <a href="demo33.html" title="强风吹拂"><img src="images/强风吹拂.png" alt="强风吹拂"></a>
       </div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo33.html" title="强风吹拂">强风吹拂</a>
         </div>
         <div class="author" id="zou"> 三浦紫苑</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo34.html" title="钝感力">
         <img src="images/钝感力.png" alt="钝感力"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo34.html" title="钝感力">钝感力</a>
         </div>
         <div class="author" id="zou">[日] 渡边淳一</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo35.html" title="旧物的灵魂">
         <img src="images/旧物的灵魂.png" alt="旧物的灵魂"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo35.html" title="旧物的灵魂">旧物的灵魂</a>
         </div>
         <div class="author" id="zou"> 郭婷</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo36.html" title="续窗边的小豆豆">
         <img src="images/续窗边的小豆豆.png" alt="续窗边的小豆豆"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo36.html" title="续窗边的小豆豆">续窗边的小豆豆</a>
         </div>
         <div class="author" id="zou"> [日] 黑柳彻子</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo37.html" title="赞美闲散">
         <img src="images/赞美闲散.png" alt="赞美闲散"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo37.html" title="赞美闲散">赞美闲散</a>
         </div>
         <div class="author" id="zou">[英]伯特兰 ·罗素</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo38.html" title="一次告别">
         <img src="images/一次告别.png" alt="一次告别"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo38.html" title="一次告别">一次告别</a>
         </div>
         <div class="author" id="zou">罗德里戈·加西亚</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo39.html" title="古道">
         <img src="images/古道.png" alt="古道"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo39.html" title="古道">古道</a>
         </div>
         <div class="author" id="zou">[英] 罗伯特·麦克法伦</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo40.html" title="信任">
         <img src="images/信任.png" alt="信任"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo40.html" title="信任">信任</a>
         </div>
         <div class="author" id="zou">[美] 埃尔南·迪亚斯</div>
       </div>
     </li>
  </ul>
  </div>
  <div class="swiper-slide" id="sw-slide">
    <ul>
     <li>
       <div class="tupian">
         <a href="demo41.html" title="为你着迷"><img src="images/为你着迷.png" alt="为你着迷"></a>
       </div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo41.html" title="为你着迷">为你着迷</a>
         </div>
         <div class="author" id="zou">(日)和山山</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo42.html" title="内陆之行">
         <img src="images/内陆之行.png" alt="内陆之行"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo42.html" title="内陆之行">内陆之行</a>
         </div>
         <div class="author" id="zou">[奥] 彼得·汉德克</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo43.html" title="食南之徒">
         <img src="images/食南之徒.png" alt="食南之徒"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo43.html" title="食南之徒">食南之徒</a>
         </div>
         <div class="author" id="zou">马伯庸</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo44.html" title="阿勒泰的角落">
         <img src="images/阿勒泰的角落.png" alt="阿勒泰的角落"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo44.html" title="阿勒泰的角落">阿勒泰的角落</a>
         </div>
         <div class="author" id="zou"> 李娟</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo45.html" title="我们八月见">
         <img src="images/我们八月见.png" alt="我们八月见"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo45.html" title="我们八月见">我们八月见</a>
         </div>
         <div class="author" id="zou">加西亚·马尔克斯</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo46.html" title="唯余细节">
         <img src="images/唯余细节.png" alt="唯余细节"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo46.html" title="唯余细节">唯余细节</a>
         </div>
         <div class="author" id="zou"> [瑞典] 伊娅·根伯格</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo47.html" title="鳄鱼">
         <img src="images/鳄鱼.png" alt="鳄鱼"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo47.html" title="鳄鱼">鳄鱼</a>
         </div>
         <div class="author" id="zou"> 莫言</div>
       </div>
     </li>
     <li>
       <div class="tupian"><a href="demo48.html" title="绿灯">
         <img src="images/绿灯.png" alt="绿灯"></a></div>
       <div class="info" id="shu">
         <div class="title" id="biao">
           <a href="demo48.html" title="绿灯">绿灯</a>
         </div>
         <div class="author" id="zou">[美]马修·麦康纳</div>
       </div>
     </li>
  </ul>
  </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    </div>
  </div>
</div>
   
    



<div>
<h2>
<span class="l">每周推荐</span>
<span> <a href="1.html">文学</a></span>
<span><a href="2.html">推理/悬疑</a></span>
<span><a href="3.html">科幻</a></span>
</h2><hr />
</div>
<div class="c">
<ul>
<li>
<div class="b"><a href="book.html"><img src="img/27.jpg" /></a>
<div class="g"><a href="book.html"><p class="l1">恶意</p></a>
<p><img src="img/46.PNG" /></p>
<p>作者：东野圭吾</p></div></div>
</li>
<li>
<div class="b"><a href="book2.html"><img src="img/35.jpg" width="250" height="360" /></a>
<div  class="g"><a href="book2.html"><p class="l1">后山开花</p></a>
<p><img src="img/43.PNG" /></p>
<p>作者：余秀华</p></div></div>
</li>
<li><div class="b"><a href="book3.html"><img src="img/25.jpg" width="250" height="360"/></a>
<div class="g"><a href="book3.html"><p class="l1">沙丘</p></a>
<p><img src="img/44.PNG" /></p>
<p>作者：弗兰克.赫伯特</p></div></li>
<li>
<div class="b"><a href="book4.html"><img src="img/34.jpg" width="250" height="360"></a>
<div class="g"><a href="book4.html"><p class="l1">无人生还</p></a>
<p><img src="img/44.PNG"></p>
<p>作者：阿加莎.克里斯蒂</p>
</div></div>
</li>
<li>
<div class="b"><a href="book5.html"><img src="img/32.jpg" width="250" height="360"></a>
<div class="g"><a href="book5.html"><p class="l1">新参者</p></a>
<p><img src="img/44.PNG"></p>
<p>作者：东野圭吾</p></div>
</li>
</div>
<div class="c"><ul>
<li>
<div class="e"><a href="book6.html"><img src="img/39.jpg" width="250" height="360"></a>
<div class="g"><a href="book6.html"><p class="l1">在细雨中呼喊</p></a>
<p><img src="img/43.PNG"></p>
<p>作者：余华</p></div>
</div>
</li>
<li>
    <div class="e"><a href="book7.html"><img src="img/51.jpg" width="250" height="360"></a>
    <div class="g"><a href="book7.html"><p class="l1">我与地坛</p></a>
    <p><img src="img/44.PNG"></p>
<p> 作者：史铁生</p></div>
</div></li>
<li>
    <div class="e"><a href="book8.html"><img src="img/28.jpg" width="250" height="360"></a>
    <div class="g"><a href="book8.html"><p class="l1">白夜行</p></a>
    <p><img src="img/43.PNG"></p>
    <p>作者：东野圭吾</p></div></div>
    </li>
<li>
    <div class="e"><a href="book9.html"><img src="img/49.jpg" width="250" height="360"></a>
    <div class="g"><a href="book9.html"><p class="l1">檀香刑</p></a>
    <p><img src="img/45.PNG"></p>
    <p>作者：莫言</p></div></div>
    </li>
<li>
    <div class="e"><a href="book10.html"><img src="img/30.jpg" width="250" height="360"></a>
    <div class="g"><a href="book10.html"><p class="l1">假面山庄</p></a>
    <p><img src="img/47.PNG"></p>
    <p>作者：东野圭吾</p></div></div>
    </li>
    </ul></div>
<footer>
  <p>版权所有 &copy; 2024 我的读书网站</p>  
  <ul class="friend-links">  
      <li><a href="guanyuwomen.html">关于我们</a></li>  
      <li><a href="falvshengming.html">法律声明</a></li>  
      <li><a href="bangzuzhongxin.html">帮助中心</a></li>  
      <!-- 更多友情链接项 -->  
  </ul> 
</footer>
<script src="swiper-bundle.min.js"></script>
<script>
    let inputs=document.querySelectorAll('input')
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
</script>

</body>
</html>
